<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>

    <div class="box-tit" data-v-6e92ad55="">
      <span data-v-6e92ad55="">后勤楼会议室电动遮阳帘系统</span>
    </div>

    <div class="main">

      <el-space wrap v-for="o in 4" :key="o">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{ o +'区遮阳帘'}}</span>
            </div>
          </template>
          <div class="runparameter">
            <span class="el-icon-s-tools bo"> 控制设定</span>
            <p><span>遮阳帘电源开关：</span>
              <el-switch v-model="value[o]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />
            </p>
            <p><span>遮阳帘开设定：</span>

              <el-switch v-model="value[o+12]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />

            </p>
            <p><span>遮阳帘关设定：</span>

              <el-switch v-model="value[o+24]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />

            </p>
          </div>
        </el-card>
      </el-space>

      <el-space wrap v-for="i in 4" :key="i">
        <el-card class="box-card">
          <template #header>
            <div>
              <span>{{ i +'区百叶窗'}}</span>
            </div>
          </template>
          <div class="runparameter">
            <span class="el-icon-s-tools bo"> 控制设定</span>
            <p> <span>百叶窗电源开关：</span>

              <el-switch v-model="value[i+36]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />

            </p>
            <p> <span>百叶窗开设定：</span>

              <el-switch v-model="value[i+48]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />

            </p>
            <p><span>百叶窗关设定：</span>

              <el-switch v-model="value[i+60]" inline-prompt active-color="#13ce66" inactive-color="#ff4949" :active-value="1" active-text="启用" :inactive-value="0" inactive-text="禁用" />

            </p>
          </div>
        </el-card>
      </el-space>

    </div>
    <div class="setup" v-show="setup">
      <p class="el-icon-error" style="float: right; margin: 1rem" @click="setup = false"></p>
      <span>暂无权限</span>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  components: {
    Header,
  },
  data() {
    return {
      title: "设备监控—电动遮阳帘系统",
      setup: false,
      value: [],
      todata: {
        level: "低液位",
        state: "off",
        man_auto: "手动",
      },
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {},
};
</script>


<style lang='less' scoped>
.bg {
  text-align: center;
}

.box-tit[data-v-6e92ad55] {
  height: 40px;
  line-height: 29px;
  width: 100%;
  font-size: 14px;
  color: #b8f9ff;
  padding-left: 39px;
  background: url()
    no-repeat;
  box-sizing: border-box;
  display: flex;
}
.box-tit[data-v-6e92ad55] span {
  margin-right: 200px;
}
.main {
  width: 100%;
  height: 90%;
  margin: auto;

  span {
    color: rgb(150, 234, 255);
    margin: 0.5rem 0 0rem 0;
    font-size: 1.3rem;
    font-weight: bolder;
  }
  .bo {
    margin-bottom: 1.2rem;
  }
  p {
    color: white;
    margin: 1rem;
    font-size: 1.3rem;
  }
  .box-card {
    background-color: rgba(71, 71, 71, 0.13);
    padding: 0;
    box-shadow: 0 0 10px rgb(150, 234, 255);
    margin: 5rem 1.2rem 1rem 1.2rem;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
  }
  .box-card:hover {
    box-shadow: 0 0 25px rgb(102, 224, 255);
  }
}
.runparameter {
  width: 100%;
  height: 50%;
  margin: 0 auto;
  span {
    font-size: 20px;
  }
  p {
    text-align: left;
    width: 100%;
    margin: 1.2rem;
    input {
      float: right;
      border: none;
      outline: none;
    }
    input {
      width: 6rem;
      margin-right: 2rem;
      font-size: 20px;
      color: white;
    }
    span {
      display: block;
      width: 190px;
      float: left;
      margin-top: 0;
    }
    el-tooltip {
      float: right;
    }
  }
}
.setup {
  height: 20rem;
  width: 30rem;
  background-color: rgb(0, 26, 65);
  color: rgb(111, 233, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15rem;
  margin-top: -10rem;
  border: 2px solid rgb(160, 244, 255);
  box-shadow: 0 0 10px rgb(160, 244, 255);
  font-size: 30px;
  border-radius: 1rem;
  span {
    text-align: center;
    line-height: 18rem;
  }
}
</style>